<script lang='ts' setup name='index'>  
 import { provide, ref,readonly, shallowReadonly, toRaw,isReactive, markRaw,reactive, customRef, watch  } from 'vue' 
    import Child from "./Child.vue";

    const user = ref({

        name:'jshand222',
        age:20

    })

    const person = ref({

        name:'jshand222',
        age:20

    })









    /* markRaw */
let citys = markRaw([
  {id:'asdda01',name:'北京'},
  {id:'asdda02',name:'上海'},
  {id:'asdda03',name:'天津'},
  {id:'asdda04',name:'重庆'}
])
// 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了
let citys2 = reactive(citys)


console.log("citys2 ",citys2)
console.log(isReactive(citys2))



    const  readOnlyPerson = shallowReadonly(person)

   
    function shallowPeson(){
        readOnlyPerson.value.name  +='~'
    }




    const readonlyUser = readonly(user)
    provide("user",readonlyUser)
    
    const rawPerson = toRaw(person.value)
    console.log(rawPerson)
    provide("person",rawPerson) //传递当前的状态数据



    // customRef
    
    // const username = ref('admin')
    
    import useCustomRef from "@/hooks/useCustomRef";
    let username = useCustomRef('admin',1000).msg



    watch(username,(newVal)=>{
        console.log("username的新值 ",newVal)
    })


</script>  
  
<template>  
    readonly


   父组件  {{ user }}  <br>
   <button @click="user.age = user.age+1">改变年龄</button>
 
    <Child></Child>



    <hr>
    <h1>shallowReadonly</h1>
    <div>
        person:  {{ person }}
    </div>
    <div>
        readOnlyPerson:  {{ readOnlyPerson }}
    </div>
    <button @click="shallowPeson">修改shallowPeson</button>




    <hr>
    <br>
    <br>
    <br>
    <br>

    <input type="text" v-model="username"/>






</template>  
  
<style scoped>  

</style>  